<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>过滤列表</title>
    <script type="text/javascript" src="../js/vue.js">

    </script>
</head>

<body>
    <div id="root">
        <h1>搜索</h1>
        <!-- 获取输入数据  匹配-->
        <input type="text" v-model="keyword">
        <button @click="sourtTypeClick(1)">升</button>
        <button @click="sourtTypeClick(2)">降</button>
        <button @click="sourtTypeClick(3)">原顺序</button>
        <ul>
            <li v-for="(p,index) in persons"> {{p.name}} {{p.age}} {{p.sex}} </li>
        </ul>

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        //#region 
        // new Vue({
        //     el: '#root',
        //     data() {
        //         return {
        //             keyword: '',
        //             persons: [

        //             ],
        //             persons2: [
        //                 { id: '001', name: "马冬梅", age: 18, sex: "女" },
        //                 { id: '002', name: "周冬雨", age: 19, sex: "女" },
        //                 { id: '002', name: "周杰伦", age: 19, sex: "男" },
        //                 { id: '004', name: "温兆伦", age: 20, sex: "男" },
        //             ],
        //         }
        //     },

        //     watch: {
        //         keyword: {
        //             immediate: true,
        //             handler(newValue, oldValue) {
        //                 this.persons = this.persons2.filter((p) => {
        //                     return p.name.indexOf(newValue) != -1
        //                 })
        //             }
        //         }
        //     }
        // })
        //#endregion

        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    sourtType: 0,
                    keyword: '',
                    // persons: [
                    // ],
                    persons2: [
                        { id: '001', name: "马冬梅", age: 18, sex: "女" },
                        { id: '002', name: "周冬雨", age: 19, sex: "女" },
                        { id: '002', name: "周杰伦", age: 19, sex: "男" },
                        { id: '004', name: "温兆伦", age: 20, sex: "男" },
                    ],
                }
            },

            computed: {///计算联动
                persons() {

                    if (this.sourtType === 3) {
                        this.sourtType = 1
                        this.keyword = ""
                        this.sourtTypeClick(this.sourtType)
                        return this.persons2
                    }
                    const arr = this.persons2.filter((p) => {
                        return p.name.indexOf(this.keyword) != -1
                    })

                    if (this.sourtType) {
                        arr.sort((p1, p2) => {
                            return this.sourtType === 1 ? p1.age - p2.age : p2.age - p1.age
                        })
                    }
                    return arr
                }

                // persons:{

                // }
            },
            methods: {
                sourtTypeClick(type) {
                    this.sourtType = type
                }
            },
        })
    </script>
</body>

</html>